/** @jsxImportSource @emotion/react */
import * as React from "react";
import {Button, CheckSwitch, InputLine, SuffixInput, Text, TextArea, useToast,} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, useItemInputControl} from "../../common/base";
import {useMedia} from "use-media";
import {assertNamesUnique} from "../../common/eHelper";
import {itemA下结论,} from "./editor";
import {EditStorageContext} from "../../StorageContext";
import {configSetter} from "./Regular.O-1";
import {useMeasureInpFilter} from "../../common/hooks";
import {itemA宏观焊接} from "./editMacr";
import {itemA上次问题} from "./editReview";
import {config安全附件, itemA安全附件} from "./editSAcces";
import {checkConfig真空, checkConfig腐蚀} from "../../movable/RqThorough/editAddon";
import {render容类别} from "../../common/render";

//【问题】useThreeColumnView不能正常处理这个回调
export const view容积=(orc:any)=>{
    return <Text>{orc?.是换热? '换热面积':'容积'}</Text>
};
export const render容积换热={
    view:(orc:any)=>{
        const has=!!(orc?.是换热);
        return <>
            <div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                <Text>{orc?.容积换热}</Text>
                <Text>{has? 'm²' : 'm³'}</Text>
            </div>
        </>
    },
};
//上一个是利用 useThreeColumnView 配合 ThreeConfigRaft 编辑组件来做的。
const input设计温={
    edit:(inp:any,setInp:(a:any)=>void)=>{
        return <div><Text css={{fontSize:'0.7rem'}}>后续3个参数属性能参数：</Text>
            <InputLine  label='性能参数 > 设计温度'>
                <SuffixInput  value={inp?.设计温 ||''}
                              onChange={e => setInp({...inp, 设计温: e.currentTarget.value || undefined}) }>℃</SuffixInput>
            </InputLine>
        </div>;
    },
    //names: ['设计温','壳程设计温度'],     //contentArr.map(([_,name] : any, i:number)=> name),
    //toTail: '设计温度太多了需要另行设定',
};

export const config设备概况 = [
    [['容器名称', '_$设备名称'], ['检验类别', '_$检验类别',],  ],
    [['容器类别','_$设备品种',render容类别], ['设备代码','_$设备代码'],  ],
    [['单位内编号','_$单位内部编号'], ['使用登记证编号', '_$使用证号'],  ],
    [['制造单位', '_$制造单位'],  ],
    [['安装单位', '_$安装单位'], ],
    [['使用单位', '_$使用单位'], ],
    [['使用单位地址', '_$使用单位地址'],  ],
    [['设备使用地点', '_$设备使用地点'],  ],
    [['使用单位统一社会信用代码','_$使用单位信用码'], ['邮政编码', '_$使用单位邮编'] ],
    [['安全管理人员', '安全员'], ['联系电话', '安全员电'], ],
    [['设计使用年限','_$设计年限', '年'], ['投入使用日期', '_$投用日期'], ],
    [['主体结构型式','_$主体结构'], ['运行状态','_$运行状态'] ],
    //特殊 con /impsaf； usePrefixDataReviewTbl({config: config资料审查,
    //还有一种 prview: 的回调做法？
    [ [{pr:'性能参数', span:4, t:'容积', view:view容积}, '_$容积换热', render容积换热],    ['内径', '_$内径','mm'],  ],
    // [[{t:'容积', view:view容积, pr:null}, '_$容积换热', render容积换热],  ['内径', '_$内径','mm'], ],
    //因为上面配置了pr:'性能参数', 导致了下面的牵涉到的各行需要对第一个desc配置位置做改造:'设计压力'改成{t:'设计压力'}；
    [[{t:'设计压力'}, '_$设计压力', 'MPa'],  ['设计温度',{n:'设计温', u:'℃'}, input设计温],   ],
    [[{t:'使用压力'}, {n:'使用压', u:'MPa'},],   ['使用温度',{n:'使用温', u:'℃'}],   ],
    [[{t:'工作介质'}, '_$工作介质',],   [' ', {r:' '},], ],
];

export const EntranceSetup =
    React.forwardRef((
        {children, show, alone = true, repId, verId, rep}: InternalItemProps, ref
    ) => {
        const atPrint = useMedia('print');
        const toast = useToast();
        const doCheckNames = React.useCallback((verId: string) => {
            const result = assertNamesUnique([{value: rep?.tzFields},
                {value:[...itemA分项页,...itemA下结论 ]}, {value: config设备概况, type:'esnt'},
                {value: configSetter(verId,), type:'esnt'},
                {value:[...itemA上次问题, ...itemA宏观焊接, ...itemA安全附件 ]},
                //匹配是usePrefixDataReview的
                {value: config安全附件, type:'esnt'},
                {value: checkConfig真空, type:'s2Lu'},  {value: checkConfig腐蚀, type:'s2Lu'},
                {value:['Projects', ]} ]);
            toast({title: "完成！", subtitle: result ? "没发现冲突" : "测试开关没开", intent: "success"});
        }, [rep,toast]);
        const {storage, setStorage} =React.useContext(EditStorageContext) as any;
        const getInpFilter = React.useCallback((par: any) => {
            const {_tblFixed, } =par||{};
            return {_tblFixed, };
        }, []);
        const {inp, setInp} = useItemInputControl({ref});
        if (atPrint) return null;
        else return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={'初始化本报告，默认值配置等'}>
                {process.env.REACT_APP_TEST==='true' && <><div>
                    <Text variant="h5">构建开发模板时的工具：校验模板的存储name冲突；</Text>
                    <Button intent='primary' onPress={() => doCheckNames(verId!)}>校验模板name唯一性</Button>
                    <Text variant="h5">设置待测试表格的各列宽度：</Text>
                    <TextArea value={storage?._tblFixed || ''} rows={2} onChange={e =>{
                        JSON.parse(e.currentTarget.value??'[]');
                        setStorage({ ...storage, _tblFixed: e.currentTarget.value || undefined}); }}/>
                </div></>
                }
                <hr/>
            </InspectRecordLayout>
        );
    });

//和目录 分项表有点关系的
export const itemA分项页=['无分项页','项页备注',];
export const ProjectListGen=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,}:InternalItemProps,  ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(null,itemA分项页,);
        const {inp, setInp} = useItemInputControl({ ref });
        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd} alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            <InputLine label={`不需要压力容器定期检验报告附页吗:`}>
                <CheckSwitch  checked= {inp?.无分项页 || false}
                              onChange={e =>setInp({...inp, 无分项页: (inp?.无分项页? undefined:true)} ) } />
            </InputLine>
            压力容器定期检验报告附页-备注:
            <TextArea  value={inp?.项页备注 ||''} rows={7}
                       onChange={e => setInp({ ...inp, 项页备注: e.currentTarget.value||undefined}) } />
        </InspectRecordLayout>;
    });
